import React from "react";
import styles from "./login.less";
import { Form, Input, Button, Checkbox } from "antd";
import Header from "@/components/header/header";
import Footer from "@/components/footer/footer";
import QyCode from "@/components/login/qyCode";

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 }
};
const tailLayout = {
  wrapperCol: { offset: 2, span: 16 }
};

const Login = () => {
  const onFinish = values => {
    console.log("Success:", values);
  };
  const onFinishFailed = errorInfo => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div className={styles.loginBox}>
      <Header />
      <div className={styles.loginTop}>
        <img
          src="//s1.hdslb.com/bfs/static/passport/static/img/rl_top.35edfde.png"
          alt=""
        />
      </div>
      <div className={styles.login}>
        <div className={styles.loginInner}>
          <div className={styles.title}>
            <h1>登录</h1>
            <div></div>
          </div>
          <div className={styles.loginFormBox}>
            <QyCode />
            <div className={styles.loginForm}>
              <Form
                {...layout}
                name="basic"
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
              >
                <Form.Item
                  label="Username"
                  name="username"
                  rules={[
                    { required: true, message: "Please input your username!" }
                  ]}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  label="Password"
                  name="password"
                  rules={[
                    { required: true, message: "Please input your password!" }
                  ]}
                >
                  <Input.Password />
                </Form.Item>
                <Form.Item
                  {...tailLayout}
                  name="remember"
                  valuePropName="checked"
                >
                  <Checkbox>Remember me</Checkbox>
                </Form.Item>
                <Form.Item {...tailLayout}>
                  <Button type="primary" htmlType="submit">
                    Submit
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
};
export default Login;
